<template>
	<view>
		<view class="charts-box"><qiun-data-charts type="radar" :chartData="chartData" background="none" /></view>
		<view class="charts-box"><qiun-data-charts type="mix" :chartData="chart" background="none" /></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			chartData: {
				categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
				series: [
					{
						name: '成交量1',
						data: [90, 110, 165, 195, 187, 172]
					},
					{
						name: '成交量2',
						data: [190, 210, 105, 35, 27, 102]
					}
				]
			},
			chart: {
				categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
				series: [
					{
						name: '曲面',
						data: [70, 50, 85, 130, 64, 88],
						type: 'area',
						style: 'curve'
					},
					{
						name: '柱1',
						index: 1,
						data: [
							40,
							{
								value: 30,
								color: '#f04864'
							},
							55,
							110,
							24,
							58
						],
						type: 'column'
					},
					{
						name: '柱2',
						index: 1,
						data: [50, 20, 75, 60, 34, 38],
						type: 'column'
					},
					{
						name: '曲线',
						data: [70, 50, 85, 130, 64, 88],
						type: 'line',
						style: 'curve',
						color: '#1890ff',
						disableLegend: true
					},
					{
						name: '折线',
						data: [120, 140, 105, 170, 95, 160],
						type: 'line',
						color: '#2fc25b'
					},
					{
						name: '点',
						index: 2,
						data: [100, 80, 125, 150, 112, 132],
						type: 'point',
						color: '#f04864'
					}
				]
			}
		};
	},
	methods: {},
	onLoad() {}
};
</script>

<style>
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
.charts-box {
	width: 100%;
	height: 300px;
}
/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */

</style>
